<template>
  <el-main>

    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="房屋名称">
        <el-input v-model="queryForm.ids" placeholder="请输入房屋名称"></el-input>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="queryForm.name" placeholder="联系人"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="queryForm.tel" placeholder="联系电话"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button  @click="remake">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="dids"
          label="装修ID"
          width="180">
      </el-table-column>
      <el-table-column
          prop="hids"
          label="房屋"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="联系人">
      </el-table-column>
      <el-table-column
          prop="tel"
          label="联系电话">
      </el-table-column>
      <el-table-column
          prop="starttime"
          label="装修时间">
      </el-table-column>
      <el-table-column
          prop="endtime"
          label="结束时间">
      </el-table-column>
      <el-table-column
          prop="createtime"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
      </el-table-column>
      <el-table-column
          prop="type"
          label="是否违规">
      </el-table-column>
      <el-table-column
          prop=""
          label="违规说明">
      </el-table-column>
      <el-table-column
          prop="remarks"
          label="备注">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="upd(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <span>
        <button @click="add">添加</button>
      </span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryForm.pageCount"
          :page-sizes="[1, 2, 3, 5]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

<!--    添加-->
    <el-dialog title="添加" :visible.sync="dialogAddVisible">
      <el-form :model="form">
        <el-form-item label="房屋" :label-width="formLabelWidth">
          <el-input v-model="form.hids" placeholder="必填,请填写房屋,格式,楼栋-单元-房屋">          </el-input>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth">
          <el-input v-model="form.name" placeholder="必填,请填写联系人">          </el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.tel" placeholder="必填,请填写联系电话">          </el-input>
        </el-form-item>
        <el-form-item label="装修时间" :label-width="formLabelWidth">
          <el-input v-model="form.starttime"  placeholder="必填,请填写装修时间">          </el-input>

        </el-form-item>
        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-input v-model="form.endtime"  placeholder="必填,请填写结束时间">          </el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remarks" placeholder="必填,请填写备注">          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>


    <!--    修改-->
    <el-dialog title="添加" :visible.sync="dialogUpdateVisible">
      <el-form :model="form">
        <el-form-item label="房屋" :label-width="formLabelWidth">
          <el-input v-model="form.hids" placeholder="必填,请填写房屋,格式,楼栋-单元-房屋" disabled></el-input>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth">
          <el-input v-model="form.name" placeholder="必填,请填写联系人">          </el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.tel" placeholder="必填,请填写联系电话">          </el-input>
        </el-form-item>
        <el-form-item label="装修时间" :label-width="formLabelWidth">
          <el-input v-model="form.starttime"  placeholder="必填,请填写装修时间">          </el-input>

        </el-form-item>
        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-input v-model="form.endtime"  placeholder="必填,请填写结束时间">          </el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择状态">
              <el-option v-for="ite in ops" :value="ite.value" :label="ite.label">

              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否违规" :label-width="formLabelWidth">
          <el-input v-model="form.type" placeholder="必填,请填写备注">          </el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remarks" placeholder="必填,请填写备注">          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  name: "list",
  data(){
    return{
      tableData:[],
      queryForm:{
          pageNUm:1,
          pageSize:10,
      },
      total:0,
      currentPage:1,
      dialogAddVisible:false,
      dialogUpdateVisible:false,
      form:{

      },
      ops:[
        {value:1,label:"待审核"},
        {value:2,label:"审核不通过"},
        {value:3,label:"装修中"},
        {value:4,label:"待验收"},
        {value:5,label:"验收成功"},
        {value:6,label:"验收失败"},
      ]
    }
  },
  methods:{
    onSubmit(){
      this.list;
    },
    remake(){
      this.queryForm=[];
    },
    handleSizeChange(val){
      this.pageSize=val;
      this.list;
    },
    handleCurrentChange(val){
      this.pageNUm=val;
      this.list;
    },
    list(){
      this.axios.get("http://localhost:1001/decoration/list",
          {params:this.queryForm}).then(res=>{
        console.log(res)
        this.tableData=res.data.data.list;
        this.total=res.data.data.total;
        this.currentPage=res.data.data.pageNUm;
      })
    },
    add(){
      this.dialogAddVisible=true;
    },
    upd(row){
      this.dialogUpdateVisible=true;
      this.form=row;
    },
    save(){
      this.axios.get("http://localhost:1001/decoration/save",
          {params:this.form}).then(res=>{
        console.log(res);

      })

    },

  },
  created() {
    this.list();
  }
}
</script>

<style scoped>

</style>